<template>
  <div>
    <!-- 用药计划设置 -->
    <el-card class="card">
      <!-- 头部 -->
      <div class="header">
        <div class="item">老人：李大爷</div>
        <div class="item">床位：123</div>
      </div>
      <!-- 表格 -->

      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="序号" width="80" />
        <el-table-column prop="name" label="药品名称" />
        <el-table-column prop="counts" label="数量" />
        <el-table-column prop="expTime" label="有效期" />
        <el-table-column prop="sum" label="剂量" />
        <el-table-column prop="remarks" label="服法" width="120" />
        <el-table-column label="服药计划">
          <template #default="scope">
            <div v-for="item in scope.row.plans" v-if="scope.row.plans">
              {{ item.time }} : {{ item.content }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="startDate" label="开始时间" />
        <el-table-column prop="endDate" label="结束时间" />
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button type="primary" link @click="setting(scope.row.id)">设置</el-button>
            <el-button type="primary" link @click="toStop(scope.row.id)">停止用药</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px; text-align: center">
        <el-button @click="back">返回</el-button>
      </div>
    </el-card>
    <SettingsMed v-if="dialogVisible" :currentId="currentId" @close="closeHandle" />
    <Stop v-if="stopDialogVisible" :currentId="currentId" @close="stopCloseHandle" />
  </div>
</template>

<script setup lang="ts">
import { reactive, onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getDrugsListForPlan } from "@/api/medicalcare/medicinelogs/medicinelogs";
import SettingsMed from "@/components/medicalcare/medicineSet/SettingsMed.vue";
import Stop from "@/components/medicalcare/medicineSet/Stop.vue";
import { DrugsPlansListData } from "@/api/medicalcare/medicinelogs/type";
import { getElderlyModel } from "@/api/market/elderly/elderly";

const route = useRoute();
const router = useRouter();
//表格数据
let tableData = ref<DrugsPlansListData[]>([]);

//dialog显示
const dialogVisible = ref(false);
//结束时间dialog显示
const stopDialogVisible = ref(false);
//获取老人用药计划列表
const getListForPlans = async (id: number) => {
  let res = await getDrugsListForPlan(id);
  tableData.value = res.list;
};

//获取老人详情
const getElderlyDetail = async (id: number) => {
  let res = await getElderlyModel(id);

  // Object.assign(elderlyData, res);
  // console.log("7788",res);
};

//当前id
const currentId = ref(0);
//设置dialog
const setting = (id: number) => {
  currentId.value = id;
  dialogVisible.value = true;
};

//停止用药
const toStop = (id: number) => {
  currentId.value = id;
  stopDialogVisible.value = true;
};

//关闭dialog
const closeHandle = (data: boolean) => {
  dialogVisible.value = false;
  if (data) {
    //表格刷新
    getListForPlans(Number(route.query.id));
  }
};

//结束dialog关闭
const stopCloseHandle = (data: boolean) => {
  stopDialogVisible.value = false;
  if (data) {
    //表格刷新
    getListForPlans(Number(route.query.id));
  }
};

//返回
const back = () => {
  router.push("/medicalcare/medicinelogs");
};

onMounted(() => {
  if (route.query.id) {
    getListForPlans(Number(route.query.id));
    getElderlyDetail(Number(route.query.id));
  }
});
</script>

<style scoped>
.card {
  width: 98%;
  margin: 0 auto;
  margin-top: 10px;

  .header {
    .item {
      margin-bottom: 18px;
    }
  }
}
</style>
